import * as React from 'react'
import ReactDOM from 'react-dom'
import './LightBox.less'

interface IProps {
    visible: boolean
    src: any
    imgClass: string
    onClose: () => void
    renderTop?: JSX.Element
    renderBotom?: JSX.Element
}
export default class LightBox extends React.Component <IProps, any> {
    static defaultProps = {
        src: '',
        visible: false
    }
    public state = {
        visible: this.props.visible
    }

    private el: any
    constructor (props: IProps) {
        super(props)
        const bodyEle = document.getElementsByTagName('body')[0]
        this.el = document.createElement('div')
        this.el.setAttribute('class', 'lightBox_contentWrap')
        bodyEle.appendChild(this.el)
    }
    public render (): JSX.Element {
        const { src, visible, imgClass } = this.props
        // let dom: any = document.getElementsByClassName('lightBoxWrap')[0]
        // const left = dom && dom.offsetLeft
        // const top = dom && dom.offsetTop + 50
        // console.log(top)
        // console.log(left)
        return (
            <div className="lightBoxWrap">
                {this.props.children}
                {
                    ReactDOM.createPortal(
                        <div className={`lightBox_content ${(visible) ? 'show sade-in' : 'hide sade-out'}`}onClick={this.handleClose}>
                            <div className="lightBox_content_top">
                                {this.props.renderTop}
                            </div>
                            <img src={src} className={imgClass} />
                            <div className="lightBox_content_bottom">
                                {this.props.renderBotom}
                            </div>
                        </div>,
                        document.getElementsByClassName('lightBox_contentWrap')[0]
                    )
                }
            </div>
        )
    }
    private handleClose = (e: any) => {
        const { onClose } = this.props
        e.stopPropagation()
        onClose()
    }
}